<template>
  <div id="app" style="min-width: 1024px">
    <el-row>
      <el-col :span="12" class="col-layout left-col">
        <div class="left-body">
          <div class="left-title">
            <img
              src="https://www.72crm.com/cloud/static/png/logo-CBpDfNYa.png"
              width="120"
              alt="logo"
            />
          </div>
          <div class="left-item">
            <img
              src="/public/customer.png"
              width="16"
              height="16"
              class="left-logn"
            />
            <div class="left-content">
              <span class="font-style left-item-title">
                强大的客户管理功能
              </span>
              <span class="font-style left-item-desc">
                借助360°客户全景画像，深入洞察客户需求，有效提升客户跟进效率，从而提高客户满意度和业务成交率。
              </span>
            </div>
          </div>
          <div class="left-item">
            <img
              src="/public/customize.png"
              width="16"
              height="16"
              class="left-logn"
            />
            <div class="left-content">
              <span class="font-style left-item-title"> 灵活的定制化服务 </span>
              <span class="font-style left-item-desc">
                悟空CRM支持高度自定义配置，适应企业特定业务流程，无缝对接现有工作模式，显著提高运营效率，降低成本。
              </span>
            </div>
          </div>
          <div class="left-item">
            <img
              src="/public/deep.png"
              width="16"
              height="16"
              class="left-logn"
            />
            <div class="left-content">
              <span class="font-style left-item-title">
                深度数据分析与决策支持
              </span>
              <span class="font-style left-item-desc">
                悟空CRM搭载深度数据分析工具，为企业提供精准的市场趋势预测和销售业绩评估，助力企业制定数据驱动的战略决策。
              </span>
            </div>
          </div>
        </div>
        <img
          src="/public/left_bg.png"
          alt=""
          style="width: 404px"
          class="left-bg"
        />
      </el-col>
      <el-col :span="12" class="col-layout right-col">
        <div class="right-body">
          <div>
            <div class="right-title">
              <span class="right-title-item">密码登陆</span>
              <el-divider direction="vertical" />
              <span class="right-title-item">验证码登陆</span>
            </div>
            <div class="right-form">
              <el-form style="max-width: 450px" label-position="top">
                <el-form-item label="手机号">
                  <el-input placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" placeholder="请输入密码" />
                </el-form-item>
                <el-checkbox label="我已阅读，同意并接受用户条款" />
              </el-form>
              <el-button color="#0052CC" class="login_btn">继续</el-button>
              <div class="register-wrap">
                还没有账号？点击
                <span class="register-link">注册账号</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup></script>
<style scoped>
.col-layout {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding-left: 116px;
  padding-right: 116px;
  padding-top: 20vh;
  position: relative;
}

.left-col {
  background: linear-gradient(139deg, #0f51b4, #3879eb);
}

.left-body {
  z-index: 1;
}

.left-title {
  width: 120px;
  margin-bottom: 64px;
}

.left-bg {
  bottom: 0;
  left: 0;
  position: absolute;
}

.left-logn {
  margin-right: 8px;
}

.left-item {
  margin: 32px 0;
  width: 401px;
  display: flex;
}

.left-content {
  display: flex;
  flex-direction: column;
}

.font-style {
  font-size: 16px;
  color: white;
}

.left-item-title {
  margin-bottom: 10px;
}

.left-item-desc {
  font-size: 13px;
}

.right-col {
  background-color: #f4f5f7;
}

.right-title {
  margin-bottom: 32px;
}

.right-title-item {
  font-size: 24px;
}

.login_btn {
  width: 450px;
  height: 40px;
  margin-top: 28px;
}

.register-wrap {
  margin-top: 16px;
  color: #5e6c84;
  font-size: 14px;
}

.register-link {
  color: #0052cc;
  cursor: pointer;
}
</style>
